<template>
  <div>

    <Panel title="集团用户成员" useBack>
         <ModifyForm
        slot="body"
        :editColumn="editColumn"
        :temporaryData='temporaryData'
        labelWidth="150px"
        :updateData="updateData"
      >
        <p
          slot="title"
        ></p>
         <div slot="timeTamp">
          <el-date-picker
          v-model="appointmentTime"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          :picker-options="pickerOptions"
          style="height:40px"
        ></el-date-picker>
        </div>
        <div slot="userSta">
          <SearchSelect
                placeholder="输入名字或手机号"
                style="margin-right:20px;"
                :value="uid"
                :loading="loading"
                :options="selectValue"
                :onChange="(val) => searchSelect('uid',val)"
                :onSearch="onSearch"
            />
        </div>
      </ModifyForm>
    </Panel>
  </div>
</template>
<script>
import Panel from "@/components/Panel";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
import request from "@/tools/request";
import SearchSelect from "@/components/SearchSelect";
import { dateFormat } from "@/tools/time";

export default {
  name:'companyUserInfo',
  components: {
    Panel,
    ModalPanel,
    ModifyForm,
    SearchSelect,
  },
  data() {
    return {
     configValue:"",
      editorOption: {},
      typeList: [],
      temporaryData: {},
      appointmentTime: null,
      loading: false,
      uid: '',
      selectValue:[],
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
      editColumn: [
        {
          name: "集团大客户",
          prop: "gid",
          type: "select",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id':'','name':'请选择'}],
          onChange: (val) => {},
          required:true,
          width:24
        },
        {
          name: "状态",
          prop: "state",
          type: "select",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id': '','name': "请选择"},{'id': 1,'name': "正常"},{'id':0, 'name':"停用"}],
          width:24,
          required: true
        },
        {
          name: "有效期",
          prop: "time",
          type: "other",
          width:24,
          required: false,
          slotName: 'timeTamp'
        },
        {
          name: "选择用户",
          prop: "user",
          type: "other",
          width:24,
          required: false,
          slotName: 'userSta'
        },
        {
          name: "备注",
          width: 24,
          prop: "mark",
          type: "text",
          required: false
        },
        {
          name: "是否支持集团账号付费",
          prop: "groupPayment",
          type: "select",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id': '','name': "请选择"},{'id': 1,'name': "支持"},{'id':0, 'name':"不支持"}],
          width:24,
          required: true
        },
        
      ],
    };
  },
  computed: {
 

  },
  methods: {
   async updateData(values) {
     let invalidTime = dateFormat(this.appointmentTime ? (this.appointmentTime[1] + 86400000-1000) : '', 'yyyy-MM-dd HH:mm:ss')
     let effectTime = dateFormat(this.appointmentTime ? this.appointmentTime[0] : '', 'yyyy-MM-dd HH:mm:ss')
     let uid = this.uid
     const {state, mark, groupPayment, gid } = values
     let url = this.$route.query.id ? "/group/user/update": "/group/user/add"
     let msg = this.$route.query.id ? "编辑成功" : "添加成功"
     let res = await request({
       url: url,
       method: "POST",
       data: { effectTime, invalidTime, state, uid, mark, groupPayment, gid }
     })
     if(res.code !==0) return
      this.$message.success(msg)
      this.$router.go(-1)
    },
    async company(){
      let { list } = await request({
      url: "/company/group/select",
      method: "POST",
      data: {}
      });
      this.editColumn[0].optionList = list
    },
    async fetchData(id){
      let { info } = await request({
        url: "/group/user/info/"+id,
        method: "GET",
        data: {}
      });
      if(info){
        info.effectTime = info.effectTime
        info.invalidTime = info.invalidTime
        this.appointmentTime = [new Date(info.effectTime).getTime(), new Date(info.invalidTime).getTime()]
        this.uid = info.uid
      }
      this.temporaryData = info
    },
    searchSelect(key, val){
      this[key] = val;
    },
    //用户
    async onSearch(query){
      if (query !== '') {
          this.loading = true;
          let { list } = await request({
              url: "/wx/user/select",
              method: "POST",
              data:  {
                key: query
              }
            });
            this.loading =  false
            this.selectValue = list.map(item => {
              item.value = item.id+''
              item.label = item.name
              return item
            })
        } else {
          this.selectValue = [];
        }
    },
  },
  created() {
    if(this.$route.query.id)
      this.fetchData(this.$route.query.id)
      this.company()
  }
};
</script>

<style lang='scss' module>

</style>